<script lang="tsx">
import { LoadingComponent as DepositLoading } from './Deposit.vue';
import { LoadingComponent as WithdrawLoading } from './Withdraw.vue';
import { CloseBtn } from '~/components/card';
import Tip2FA from '~comp-b/auth/2fa/Tip2FA.vue';

const Deposit = defineSuspense(() => import('./Deposit.vue'), { loadingComponent: DepositLoading });
const Withdraw = defineSuspense(() => import('./Withdraw.vue'), { loadingComponent: WithdrawLoading });

function useTabs(initTab: 'deposit' | 'withdraw' = 'deposit') {
  const key = ref(initTab);
  const list = computed(() => [
    { key: 'deposit', label: $t('p9zKloGqNTkIgC4asiQrx'), icon: 'i-ph:hand-deposit-fill' },
    { key: 'withdraw', label: $t('xQp2HJedTncmCsXifzn3'), icon: 'i-ph:hand-withdraw-fill' },
  ]);
  const current = computed(() => list.value.find(x => x.key === key.value));

  return reactive({ key, list, current });
}
</script>

<script setup lang="tsx">
const props = withDefaults(defineProps<{
  initTab?: 'deposit' | 'withdraw';
}>(), {
  initTab: 'deposit',
});
const emits = defineEmits<{
  close: [];
}>();

const tab = useTabs(props.initTab);
</script>

<template>
  <div class="pointer-events-auto" u:lt-tablet="w-full" u:tablet="max-w-195 flex">
    <div class="relative flex flex-col bg-sys-layer-d" u:lt-tablet="rounded-t-2 p-3" u:tablet="w-60 rounded-l-3 p-4">
      <div class="mb-3 flex-between rounded-t-2">
        <div class="text-6 font-semibold" u:tablet="text-7">
          {{ $t('qJaOFvSHkapUsSa7qb0s') }}
        </div>
        <CloseBtn class="tablet:hidden" @click="emits('close')" />
      </div>
      <div class="flex tablet:(block) lt-tablet:*:bg-sys-layer-a">
        <div
          v-for="item in tab.list" :key="item.key"
          class="tab" :class="tab.key === item.key ? 'active' : ''"
          @click="tab.key = (item.key as any)"
        >
          <i :class="item.icon" class="mr-1" />{{ item.label }}
        </div>
      </div>

      <Tip2FA
        class="lt-tablet:(absolute left-3 right-3 -order-1 -transform-translate-y-135%) tablet:(mt-auto)"
        @open="emits('close')"
      />
    </div>

    <div class="bg-sys-layer-c" u:lt-mobile="h-[calc(var(--dfvh)-210px)]" u:lt-tablet="p-3 rounded-b-2 min-h-95" u:tablet="min-h-110 p-4 w-120 flex-1 rounded-r-3">
      <div class="mb-4 hidden !tablet:flex-between">
        <span class="text-lg">{{ tab.current?.label }}</span>
        <CloseBtn @click="emits('close')" />
      </div>
      <KeepAlive><Deposit v-if="tab.key === 'deposit'" /></KeepAlive>
      <KeepAlive><Withdraw v-if="tab.key === 'withdraw'" /></KeepAlive>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tab {
  --uno: 'flex flex-1 items-center px-3 py-3 text-base cursor-pointer rounded-7.5 lt-tablet:(bg-sys-layer-a rounded-2)';

  & + & {
    --uno: 'ml-3 tablet:(ml-0 mt-3)';
  }

  &.active {
    --uno: 'bg-brand-to-black';
  }
}
</style>
